<!--
 * @Descripttion: 数据清洗
 * @version: 
 * @Author: 淏
 * @Date: 2023-11-24 13:09:50
 * @LastEditors: 淏
 * @LastEditTime: 2024-03-12 13:15:06
-->
<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i style="color: #00ffff" class="el-icon-wallet"></i>
          <span style="color: #00ffff">数据清洗</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <stepsPage :active="active"></stepsPage>
      </div>
      <div style="text-align: center">
        <el-button
          class="button"
          @click="prev"
          v-waves
          plain
          style="width: 100px"
          v-if="active == 1 || active == 2"
        >
          上一步
        </el-button>
        <el-button
          class="button"
          @click="next"
          v-waves
          plain
          style="width: 100px"
          v-if="active == 0 || active == 1"
        >
          下一步
        </el-button>
        <el-button
          class="button"
          @click="insertData"
          icon="el-icon-folder-add"
          v-waves
          plain
          style="width: 100px"
          v-if="active == 2"
        >
          提交结果
        </el-button>
      </div>
      <!-- 步骤 1 上传文件 -->
      <div v-if="active == 0" style="text-align: center; margin-top: 50px">
        <!-- 上传Excel-->
        <uploadExcel @getExcel="getExcel"></uploadExcel>
      </div>
      <!-- 步骤 2 获取数据、清洗数据 -->
      <div v-if="active == 1">
        <el-tabs
          v-model="activeName"
          style="margin-top: 10px"
          @tab-click="tabClick"
          type="card"
        >
          <el-tab-pane
            :label="sheetItem.sheetName"
            :name="sheetItem.sheetNo.toString()"
            v-for="(sheetItem, sheetIndex) in sheetArr"
            :key="sheetIndex"
          >
            <el-button
              class="button"
              @click="clearDra"
              v-waves
              plain
              style="width: 100px; margin-left: 80vw"
              v-if="active == 1"
            >
              数据清洗
            </el-button>

            <virtuallyTable
              style="margin-top: 20px"
              :tableData="tableData"
              :columns="columns"
              :handleBts="handleBts"
              :columnWidth="80"
              @getTableBtn="getTableBtn"
            ></virtuallyTable>
          </el-tab-pane>
        </el-tabs>
        <!-- 清洗弹出层 -->
        <clearDrawer
          ref="clearDrawer"
          :tableData="tableData"
          :columns="columns"
          @getCleanTable="getCleanTable"
        ></clearDrawer>
      </div>
      <!-- 步骤三、保存清洗数据 -->
      <div v-if="active == 2">
        <dataPersist
          ref="dataPersist"
          :tableData="tableData"
          :columns="columns"
          :chooseImported="chooseImport"
        ></dataPersist>
      </div>
    </div>
  </div>
</template>

<script>
  import stepsPage from './components/stepsPage.vue'
  import clearDrawer from './components/clearDrawer.vue'
  import dataPersist from './components/dataPersist.vue'
  import uploadExcel from '@/components/excel/uploadExcel.vue'
  import virtuallyTable from '@/components/public/virtuallyTable.vue'
  export default {
    // 组件名称
    name: 'clearImport',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: {
      stepsPage,
      uploadExcel,
      virtuallyTable,
      clearDrawer,
      dataPersist,
    },
    // 组件状态值
    data() {
      return {
        active: 0,
        activeName: '0',
        sheetArr: '',
        tableData: [],
        columns: [],
        handleBts: [
          {
            btType: 'danger',
            btName: '删除',
            funName: 'delete',
          },
        ],
        chooseImport: {
          createTime: '',
          id: '',
          name: '',
          type: '',
        },
      }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    // 组件方法
    methods: {
      //点击sheet 即切换tabs
      tabClick(tab, event) {
        console.log(Number(tab.index))
        let Num = Number(tab.index)
        this.tableData = this.sheetArr[Num].rows
        this.columns = this.sheetArr[Num].tableColumnName
      },
      insertData() {
        this.$refs['dataPersist'].submitAdd()
      },
      //表格按钮点击后触发   update修改、delete删除
      getTableBtn(type, row) {
        this.chooseData = row
        switch (type) {
          case 'delete':
            this.deleteData()
            break
        }
      },
      deleteData() {
        var index = this.tableData.indexOf(this.chooseData)
        if (index !== -1) {
          this.tableData.splice(index, 1)
        }
      },
      /**
       * @description 组件方法
       * @author haoChen 15239820820@163.com
       * @export
       * @param {}
       * @return {}
       */
      //步骤条上一步按钮
      prev() {
        this.active -= 1
      },
      //步骤条下一步按钮
      next() {
        this.active += 1
      },
      //上传文件后返回
      getExcel(row) {
        this.sheetArr = row.data.sheetList
        this.tableData = this.sheetArr[0].rows
        this.columns = this.sheetArr[0].tableColumnName
        this.next()
      },
      //弹出层清洗from
      clearDra() {
        this.$refs['clearDrawer'].showDrawer(this.tableData, this.columns)
      },
      //数据清洗返回值
      getCleanTable(row) {
        let Num = Number(this.activeName)
        this.sheetArr[Num].rows = row.cleanData
        this.tableData = row.cleanData
      },
    },
    created() {
      if (this.$route.query.chooseImport) {
        this.chooseImport = this.$route.query.chooseImport.importData
      } else {
        this.chooseImport = {
          createTime: '',
          id: '',
          name: '',
          type: '',
        }
      }
    },
    mounted() {},
  }
</script>

<style scoped>
  .button {
    margin-top: 13px;
    background: rgba(0, 0, 255, 0.2);
    border-radius: 10px;
    border: 1px solid #295a85;
    color: #00ffff;
    text-shadow: 0 0 25px #00ffff;
    font-weight: 700;
  }
</style>
<style lang="less" scoped>
  /deep/.el-steps--simple {
    background: #00ffff70;
  }
  /deep/.el-step__head.is-finish {
    color: #00ffff !important;
  }
  /deep/.el-step__title.is-finish {
    color: #00ffff !important;
    text-shadow: 0 0 25px #00ffff;
    font-weight: 700;
  }
  /deep/.el-step__title.is-process {
    color: #ffffff !important;
    text-shadow: 0 0 25px #ffffff;
  }
  /deep/.el-step__head.is-process {
    color: #ffffff !important;
    text-shadow: 0 0 25px #ffffff;
  }
  /deep/ .el-step__head.is-wait {
    color: #ffffff !important;
    text-shadow: 0 0 25px #ffffff;
  }
  /deep/ .el-step__title.is-wait {
    color: #ffffff !important;
    text-shadow: 0 0 25px #ffffff;
  }
</style>
